<%@ Page
    Language="C#"
    MasterPageFile="~/DefaultMaster.master"
    AutoEventWireup="true"
    Inherits="CommonPage"
    Title="SliderPanel Sample"    
    Theme="SampleSiteTheme"%>

<asp:Content ContentPlaceHolderID="SampleContent" Runat="Server">
    
    <ajaxToolkit:ToolkitScriptManager runat="server" ID="ScriptManager1" />

    <div class="demoarea">
        <div class="demoheading">SideBar Demonstration</div>
       
        <myajaxToolkit:SideBar runat="server" id="SideBar" 
            SideBarWidth="36px" PanelsWidth="250px"
            ActivePanelIndex="0" Height="200px"
            OnClientActivePanelChanged="panelChanged"
            OnClientAutoHideChanged="autohideChanged"
            PinnedImage="pin.gif"
            UnpinnedImage="unpin.gif">
            <myajaxToolkit:SidePanel runat="server" ID="SliderPanel1" PanelText="Primo"
                PanelImage="star.ico" Enabled="false">
                <ContentTemplate>
                    <div style="margin-top:10px">
                    This is first panel
                    </div>
                </ContentTemplate>
            </myajaxToolkit:SidePanel>
            <myajaxToolkit:SidePanel runat="server" ID="SliderPanel2" PanelText="Secondo"
                PanelImage="rss.ico">
                <ContentTemplate>
                    This is second panel
                </ContentTemplate>
            </myajaxToolkit:SidePanel>
        </myajaxToolkit:SideBar>
        
    
        <p>
            Msg: <asp:Label ID="lblMsg" runat="server" Text="-"></asp:Label><br /><br />
            <input id="Button2" type="button" value="Switch Active Panel" onclick="changeindex();"/>
            <input id="Button3" type="button" value="Switch Pin" onclick="pin();"/>
            <br /><asp:Button ID="Button1" runat="server" Text="PostBack!" />
        </p>

        <script type="text/javascript">
        function autohideChanged() {
            var msg = $get('<%=lblMsg.ClientID %>');
            msg.innerHTML = 'AutoHide changed! New status: ' + $find('<%=SideBar.ClientID %>').get_autoHide();
        }        
        function panelChanged() {
            var msg = $get('<%=lblMsg.ClientID %>');
            msg.innerHTML = 'Panel changed! New panel index: ' + $find('<%=SideBar.ClientID %>').get_activePanelIndex();
        }
        function pin()
        {
            var sideobj = $find('<%=SideBar.ClientID %>');
            sideobj.set_autoHide(!sideobj.get_autoHide());
        }        
        function changeindex()
        {
            var s = $find('<%=SideBar.ClientID %>');
            var index = s.get_activePanelIndex();
            index++;
            if (index == s.get_panels().length)
                index = 0;                
            s.set_activePanelIndex(index);
        }
        </script>    
        
    </div> 
    <div class="demobottom"></div>
    
    <asp:Panel ID="description_HeaderPanel" runat="server" style="cursor: pointer;">
        <div class="heading">
            <asp:ImageButton ID="Description_ToggleImage" runat="server" ImageUrl="~/images/collapse.jpg" AlternateText="collapse"  />
            SideBar Description
        </div>
    </asp:Panel>
    <asp:Panel id="description_ContentPanel" runat="server" style="overflow:hidden;">
        <p>
            SideBar is an ASP.NET AJAX Control which creates a set of Panels that can be used to show panel as slider. A SideBar is a host for a number of SidePanel controls. 
        </p>
        <p>
            Each SidePanel defines its PanelText, PanelImage and a ContentTemplate that defines its content. The most recent panel should remain selected after a postback. 
        </p>
    </asp:Panel>

    <asp:Panel ID="properties_HeaderPanel" runat="server" style="cursor: pointer;">
        <div class="heading">
            <asp:ImageButton ID="Properties_ToggleImage" runat="server" ImageUrl="~/images/expand.jpg" AlternateText="expand"  />
            SideBar Properties
        </div>
    </asp:Panel>
    <asp:Panel id="properties_ContentPanel" runat="server" style="overflow:hidden;" Height="0px">
        <p>The control above is initialized with this code. The <em>italic</em> properties are optional:</p>
<pre>&lt;myajaxToolkit:SideBar runat="server" 
        PinnedImage="pin.gif"
        UnpinnedImage="unpin.gif"        
        <em>ActivePanelIndex</em>="0" 
        <em>SideBarWidth</em>="36px" 
        <em>CaptionHeight</em>="24px"
        <em>AutoHide</em>="false"
        <em>PanelsWidth</em>="250px"
        <em>HideDelay</em>="1000"&gt;
    <strong>&lt;myajaxToolkit:SidePanel</strong> runat="server" 
        <em>PanelText</em>="First Panel"
        PanelImage="firstpanel.gif"
        &lt;ContentTemplate&gt;
            ...
        &lt;/ContentTemplate&gt;
    <strong>/&gt;</strong>
&lt;/myajaxToolkit:SideBar&gt;</pre>


        <b>SideBar Properties</b>
        <ul>
            <li><strong>CssClass</strong> - A css class override used to define a custom look and feel for the sidebar.</li>
            <li><strong>PinnedImage</strong> - Image url for pinned image.</li>
            <li><strong>UnpinnedImage</strong> - Image url for unpinned image.</li>
            <li><strong>ActivePanelIndex</strong> - The first panel to show</li>
            <li><strong>SideBarWidth</strong> - sets the width of the sidebar</li>
            <li><strong>CaptionHeight</strong> - sets the heigth of the caption in the container</li>
            <li><strong>AutoHide</strong> - sets if the sidebar is pinned or not</li>
            <li><strong>PanelsWidth</strong> - sets the width of tthe body for panels</li>
            <li><strong>HideDelay</strong> - time delay to hide the panel shown</li>
        </ul>
        <b>SidePanel Properties</b>
        <ul>
            <li><strong>OnClientActivePanelChanged</strong> - The name of a javascript function to attach to
                the client-side when a the active panel changed.</li>
            <li><strong>OnClientAutoHideChanged</strong> - The name of a javascript function to attach to
                the client-side when a the autohide property changed.</li>                
            <li><strong>PanelText</strong> - The text to display in the panel caption</li>
            <li><strong>PanelImage</strong> - The image to display in the sidebar</li>
            <li><strong>ContentTemplate</strong> - A TemplateInstance.Single ITemplate to use to 
                render the panel content</li>
        </ul>      
    </asp:Panel>
  

    <asp:Panel runat="server" ID="CSS_HeaderPanel" Style="cursor: pointer;">
        <div class="heading">
            <asp:ImageButton ID="CSS_ToggleImage" runat="server" ImageUrl="~/images/collapse.jpg"
                AlternateText="collapse" />
            SideBar Theming
        </div>
    </asp:Panel>
    <asp:Panel runat="server" ID="CSS_ContentPanel" Style="overflow: hidden;" Height="0px">
        You can change the look and feel of SideBar using the SideBar CssClass property. SideBar
        has a predefined set of CSS classes that can be overridden. It has a default style
        which is embedded as a WebResource and is a part of the assembly that has
        styles set for all the sub-classes. You can find the default styles in the Toolkit
        solution in the <strong>"MyAjaxControlToolkit\SideBar\SideBar.css"</strong> file. If your
        CssClass does not provide values for any of those then it falls back to the default
        value. In the example above the default style is used. To customize the same the
        user would have to set the CssClass property to the name of the CSS style and define
        the styles for the individual classes so that the various elements in a Tab control
        can be styled accordingly. For example if the CssClass property was set to "CustomTabStyle"
        this is how the css to style the tab header would look:
        <pre>
.CustomSideBarStyle .ajax__sidebar_bar {
    font-family:verdana,tahoma,helvetica;
    font-size:11px;
    ...
}</pre>
        <strong>SideBar Css classes</strong>
        <br />
        <ul>
            <li><strong>.ajax__sidebar_bar:</strong>
                A container element that wraps the side bar.</li>
            <li><strong>.ajax__sidebar_content:</strong>
                A container element that wraps the caption and the panels</li>
            <li><strong>.ajax__sidebar_autohide_autohide:</strong> 
                Class for the image in autohide mode.</li>
            <li><strong>.ajax__sidebar_autohide_static:</strong>
                Class for the image when autohide mode is turned off.</li>
            <li><strong>.ajax__sidebar_autohide_hover:</strong> 
                Class for the image when the mouse move over.</li>
            <li><strong>.ajax__sidebar_button:</strong>
                Class for the button in sidebar. </li>
            <li><strong>.ajax__sidebar_button_active:</strong>
                Class for the current button in sidebar. </li>       
            <li><strong>.ajax__sidebar_caption:</strong>
                Class for the caption into the content panel. </li>        
            <li><strong>.ajax__sidebar_panel:</strong>
                Class for the panels into the content panel. </li>                                       
        </ul>
        <br />
        <p>
        You can also 'expand' classes for child elements.<br />
        Ex:<br />
        <em>ajax__sidebar_button img:</em> for the image element inside the button in the sidebar.
        </p>
    </asp:Panel>
      
    <ajaxToolkit:CollapsiblePanelExtender ID="cpeDescription" runat="Server" 
        TargetControlID="description_ContentPanel"
        ExpandControlID="description_HeaderPanel"
        CollapseControlID="description_HeaderPanel"
        Collapsed="False" 
        ImageControlID="description_ToggleImage" />
    <ajaxToolkit:CollapsiblePanelExtender ID="cpeProperties" runat="Server" 
        TargetControlID="properties_ContentPanel"
        ExpandControlID="properties_HeaderPanel"
        CollapseControlID="properties_HeaderPanel"
        Collapsed="True" 
        ImageControlID="properties_ToggleImage" />
     <ajaxToolkit:CollapsiblePanelExtender ID="cpeCSS" runat="Server" 
        TargetControlID="CSS_ContentPanel"
        ExpandControlID="CSS_HeaderPanel" CollapseControlID="CSS_HeaderPanel" Collapsed="True"
        ImageControlID="CSS_ToggleImage" />
</asp:Content>